/// <reference path="../../typings/hterm.d.ts" />
import React, { useEffect, useState } from 'react'
import { UpOutlined, DownOutlined, DownCircleFilled, DownCircleOutlined } from '@ant-design/icons'
import { Col, Row } from 'antd'

import { counterStateType } from '../store/reducers/types'
import { ChildProcessWithoutNullStreams } from 'child_process'

export enum Runcode {
  start, stop
}

type Props = {
  currentfile: counterStateType['currentfile'],
  value: string
  ls?: ChildProcessWithoutNullStreams | null
}







export default (props: Props) => {
  const { value } = props
  const [show, setShow] = useState(false)
  const [auto, setAuto] = useState(true)


  useEffect(() => {
    const terminal = document.getElementById('terminal')
    if (terminal && auto) {
      terminal.scrollTop = terminal.scrollHeight
    }
  }, [value])


  useEffect(() => {
    let x = document.querySelector('#tty .resize') as HTMLDivElement
    if (x) {
      if (show) {
        x.style.height = '200px'
      } else {
        x.style.height = '30px'
      }
    }
  }, [show])

  function onTouchStart(event: React.TouchEvent<HTMLDivElement>) {
    event.target.addEventListener('touchmove', (e) => {
      const ev = e as TouchEvent
      const x = document.querySelector('#tty .resize') as HTMLDivElement
      x.style.height = window.innerHeight - ev.touches[0].clientY + 'px'
    }, false)

  }

  function onTouchEnd(event: React.TouchEvent) {
    event.target.removeEventListener('touchmove', () => { }, false)
  }

  return <div id="tty" className={show ? "ttyclass" : ''} >
    <div className="position-relative">
      <div className="resize"  ></div>
      <div className="tty-main">
        <Row className="header" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}  >
          <Col span={20}>
            <ul className="display-inline-block">
              {/* <li className="display-inline-block">
                问题
          </li> */}
              <li className="display-inline-block" onClick={() => {

              }}>
                python
          </li>
            </ul>
          </Col>
          <Col span={4} className="text-right" >
            {
              auto ? <DownCircleFilled title="取消自动滚动" onClick={() => setAuto(false)} /> : <DownCircleOutlined title="自动滚动" onClick={() => setAuto(true)} />
            }
            &nbsp;
            &nbsp;
            &nbsp;
            {
              show ? <DownOutlined onClick={() => setShow(false)} /> : <UpOutlined onClick={() => setShow(true)} />
            }
          </Col>
        </Row>
        <textarea id="terminal" readOnly value={value}></textarea>
      </div>
    </div>
  </div>
}